<html>

<head>
  <meta charset="utf-8" />
  <title>Lesson09 - React第九课之表单</title>
</head>

<body>
  <div id="app"></div>
  <ul>
    <li>React中 textarea标签使用 value属性来定义它的文本内容</li>
    <li>React中 select标签不再使用 selected 属性来表示选中值；
      而是通过在 根标签 select 上的 value 属性来表示选中的值；
      例如： select 标签的 value='test'， 它的子元素 option 中的某一项的 value='test'.
      则表示当前项被选中
    </li>
  </ul>


  <script src="../lib/react.development.js"></script>
  <script src="../lib/react-dom.development.js"></script>
  <script src="../lib/babel.min.js"></script>
  <script type="text/babel">
    const appDom = document.getElementById('app');
      class FormTest extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            value: ''
          }
        }

        handleChange = (e) => {
          this.setState({
            value: e.target.value
          });
        }

        handleSubmit = (e) => {
          alert('您输入的信息是：' + this.state.value);
          e.preventDefault();
        }
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              用户输入： <input type='text' placeholder='请输入值后点击提交'
                value={this.state.value} onChange={this.handleChange} />
              <input type='submit' value='提交' />
              <Reservation />
            </form>
          )
        }
      }

      class Reservation extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            isGoing: true,
            numberOfGuests: 2
          };

          this.handleInputChange = this.handleInputChange.bind(this);
        }

        handleInputChange(event) {
          const target = event.target;
          const value = target.type === 'checkbox' ? target.checked : target.value;
          const name = target.name;

          this.setState({
            [name]: value
          });
        }

        render() {
          return (
            <form>
              <label>
                Is going:
                <input
                  name="isGoing"
                  type="checkbox"
                  checked={this.state.isGoing}
                  onChange={this.handleInputChange} />
              </label>
              <br />
              <label>
                Number of guests:
                <input
                  name="numberOfGuests"
                  type="number"
                  value={this.state.numberOfGuests}
                  onChange={this.handleInputChange} />
              </label>
            </form>
          );
        }
      }
      ReactDOM.render(<FormTest />, appDom);
    </script>
</body>

</html>